<template>
  <div>
    <el-button
      type="primary"
      plain
      icon="el-icon-plus"
      size="small"
      @click="handleAdd"
      class="mt20"
      >新增</el-button
    >
    <!-- v-hasPermi="['parkManage:energyDevice:config']" -->
    <el-table :data="userList" style="width: 100%" class="mt20" height="460">
      <el-table-column type="index" label="序号" width="50" align="center">
      </el-table-column>
      <el-table-column
        align="center"
        prop="udid"
        label="标识码"
        min-width="150"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column align="center" prop="sex" label="设备类型">
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.energy_consumption_device_type"
            :value="scope.row.type"
          />
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="name"
        label="设备名称"
        min-width="150"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="brand"
        label="设备品牌"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="power"
        label="总额定功率(W)"
        width="150"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="installTime"
        label="安装时间"
        width="150"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="installPosition"
        min-width="150"
        label="安装位置描述"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        min-width="150"
        prop="remarks"
        label="备注"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            icon="el-icon-delete"
            style="color: red"
            @click="handlerDelete(scope.row)"
            >删除</el-button
          ></template
        >
      </el-table-column>
    </el-table>
    <!-- 对话框 -->
    <el-dialog
      title="配置用能设备"
      :visible.sync="show"
      width="1200px"
      append-to-body
      top="5vh"
    >
      <aps-form
        :config="apsForm.formConfig"
        :model="apsForm.formData"
        :formRef="apsForm.formRef"
        :labelWidth="apsForm.labelWidth"
        ref="form"
      ></aps-form>

      <lb-table
        v-loading="tableDataFlag"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="#a19f9fb0;"
        :column="tableData.column"
        :data="tableData.data"
        border
        :height="500"
        pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 30, 40]"
        :current-page.sync="currentPage"
        :total="total"
        :page-size="pageSize"
        @size-change="handleSizeChange"
        @p-current-change="handleCurrentChange"
        @selection-change="handleSelectionChange"
      >
      </lb-table>

      <div slot="footer" class="dialog-footer">
        <el-button v-loading="loading" type="primary" @click="submit"
          >确 定</el-button
        >
        <el-button @click="close">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  devicesList,
  energyDeviceList,
  deleteEnergyDevice,
  addEnergyDevice,
} from "@/api/park/roommsg.js";
import CascaderSelect from "@/components/Select/CascaderSelect";
export default {
  dicts: ["energy_consumption_device_type"],
  props: {
    id: {
      type: [Number, String],
      default: "",
    },
  },
  components: {
    CascaderSelect,
  },
  data() {
    return {
      loading: false,
      tableDataFlag: false,
      show: false,
      userList: [],
      multipleSelection: [],
      apsForm: {
        formRef: "form",
        labelWidth: "auto",
        formData: {},
        formConfig: {
          formAttr: {
            inline: true,
            size: "small",
          },
          properties: {
            deviceCode: {
              label: "识别码:",
              typeName: "el-input",
              placeholder: "请输入",
            },
            type: {
              label: "设备类型:",
              typeName: "el-select",
              render: (h) => {
                let that = this;
                let arr = [];
                that.dict?.type?.energy_consumption_device_type.some((item) => {
                  arr.push(item);
                });
                let valNum = that.$refs?.form?.getFieldsValue().type;
                let a = [
                  h(
                    "el-select",
                    {
                      attrs: {
                        placeholder: "设备类型",
                        value: valNum,
                        clearable: true,
                      },
                      props: ["value"],
                      on: {
                        change: (value) => {
                          that.$refs?.form?.setFieldValue("type", value);
                          that.$forceUpdate();
                        },
                      },
                    },
                    [
                      arr.map((item) => {
                        let { label, value } = item;
                        return h("el-option", {
                          props: {
                            label,
                            value: value,
                            key: value,
                          },
                        });
                      }),
                    ]
                  ),
                ];
                return h("div", a);
              },
            },
            name: {
              label: "设备名称:",
              typeName: "el-input",
              placeholder: "请输入",
            },
            installPosition: {
              label: "安装位置描述:",
              typeName: "el-input",
              placeholder: "请输入",
            },
            remarks: {
              label: "备注:",
              typeName: "el-input",
              placeholder: "请输入",
            },
          },
          formSoltButton: [
            {
              label: "搜索",
              type: "primary",
              typeName: "el-button",
              size: "small",
              icon: "el-icon-search",
              click: this.handlerSearchDetail,
            },
            {
              label: "重置",
              typeName: "el-button",
              size: "small",
              icon: "el-icon-refresh-left",
              click: this.handleReset,
            },
          ],
        },
      },
      tableData: {
        column: [
          {
            type: "selection",
            selectable: this.selectable,
          },
          {
            prop: "udid",
            label: "识别码",
            minWidth: 100,
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "type",
            label: "设备类型",
            align: "center",
            showOverflowTooltip: true,
            render: (h, scope) => {
              return (
                <div>
                  <dict-tag
                    options={this.dict.type.energy_consumption_device_type}
                    value={scope.row.type}
                  />
                </div>
              );
            },
          },
          {
            prop: "name",
            label: "设备名称",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "brand",
            label: "设备品牌",
            minWidth: 150,
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "power",
            label: "总额定功率(W)",
            minWidth: 120,
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "installTime",
            label: "安装时间",
            minWidth: 120,
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "installPosition",
            label: "安装位置描述",
            minWidth: 120,
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "remarks",
            label: "备注",
            minWidth: 120,
            align: "center",
            showOverflowTooltip: true,
          },
        ],
        data: [],
      },
      currentPage: 1,
      pageSize: 10,
      total: 0,
    };
  },
  methods: {
    getList() {
      let that = this;
      const data = {
        roomId: this.id,
        ableAdd: 1,
      };
      energyDeviceList(data)
        .then((res) => {
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          that.userList = res?.rows ?? [];
        })
        .catch((err) => {
          // this.$message.error("系统错误,请联系管理员!");
        });
    },
    handleAdd() {
      this.show = true;
      this.$nextTick(() => {
        this.handlerSearchDetail();
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.multipleSelection = selection.map((item) => item.id);
    },
    handlerDelete(row) {
      let that = this;
      let id = row.id;
      const text = "是否确认删除" + (row?.nickName ?? "该条数据") + "？";
      this.$modal
        .confirm(text)
        .then(() => {
          that.delectRequest(id);
        })
        .catch(() => {
          that.$message({
            message: "取消删除",
          });
        });
    },
    delectRequest(id) {
      let that = this;
      deleteEnergyDevice(id)
        .then((res) => {
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          that.$message.success("已删除!");
          that.getList();
        })
        .catch((err) => {
          // this.$message.error("系统错误,请联系管理员!错误码404007");
        });
    },
    initData(data) {
      let that = this;
      let query = {
        ...data,
      };
      query.pageNum = that.currentPage;
      query.pageSize = that.pageSize;
      this.tableDataFlag = true;
      energyDeviceList(query)
        .then((res) => {
          this.tableDataFlag = false;
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          that.tableData.data = res?.rows ?? [];
          that.total = res?.total ?? 0;
        })
        .catch((err) => {
          this.tableDataFlag = false;
          // this.$message.error("系统错误,请联系管理员!");
        });
    },
    // 搜索
    handlerSearchDetail() {
      const { ...other } = this.$refs?.form?.getFieldsValue();
      const data = {
        ...other,
        roomId: this.id,
        ableAdd: 0,
      };
      this.initData(data);
    },
    // 重置
    handleReset() {
      this.$refs?.form?.resetFields();
      this.handlerSearchDetail();
    },
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.handlerSearchDetail();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.handlerSearchDetail();
    },
    submit() {
      if (this.multipleSelection.length <= 0) {
        this.$message.warning("请选择要配置的设备");
        return false;
      }
      const data = {
        roomId: this.id,
        deviceIds: this.multipleSelection,
      };
      this.loading = true;
      addEnergyDevice(data)
        .then((res) => {
          this.loading = false;
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          this.$message.success("操作成功");
          this.close(true);
        })
        .catch(() => {
          this.loading = false;
          // this.$message.error("系统错误,请联系管理员!404002");
        });
    },
    close(status) {
      this.show = false;
      this.currentPage = 1;
      this.pageSize = 10;
      if (status) {
        this.getList();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.dept {
  text-align: right;
}
</style>
